<template>
  <div class="comment">
    <h4>真实用户评论{{commentNum}}</h4>
    <div class="scores">
      <div class="num1">
        <p>总评论{{hotellist[0].all_remarks}}</p>
        <p>好评论{{hotellist[0].good_remarks}}</p>
        <p>差评论{{hotellist[0].bad_remarks}}</p>
      </div>

      <div class="num2">
        <div class="num2_p">
          <div class="num2_9_content" aria-valuetext="4分">
            <!-- <span class="el-rate__item" style="cursor: auto;">
              <i class="el-rate__icon el-icon-star-on" style="color: rgb(247, 186, 42);"></i>
            </span>
            <span class="el-rate__item" style="cursor: auto;">
              <i class="el-rate__icon el-icon-star-on" style="color: rgb(247, 186, 42);"></i>
            </span>
            <span class="el-rate__item" style="cursor: auto;">
              <i class="el-rate__icon el-icon-star-on" style="color: rgb(247, 186, 42);"></i>
            </span>
            <span class="el-rate__item" style="cursor: auto;">
              <i class="el-rate__icon el-icon-star-on" style="color: rgb(247, 186, 42);"></i>
            </span>
            <span>{{hotellist[0].stars}}</span>-->
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}分"
            ></el-rate>
          </div>
        </div>
        <div class="recommend">推荐</div>
      </div>

      <div class="num3">
        <div class="num3_location">
          <div class="num3_content">
            <svg data-v-52d03705 viewBox="0 0 74 74">
              <path
                data-v-52d03705
                d="M 35 2, A 35,35 0 1 1 2.5845207259532756,28.8164166186711"
                fill="none"
                stroke="#f90"
                stroke-width="2"
              />
            </svg>
            <span class="score">
              <span>环境</span>
              <span>{{hotellist[0].scores.environment.toFixed(1)}}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="num3">
        <div class="num3_location">
          <div class="num3_content">
            <svg data-v-52d03705 viewBox="0 0 74 74">
              <path
                data-v-52d03705
                d="M 35 2, A 35,35 0 1 1 2.5845207259532756,28.8164166186711"
                fill="none"
                stroke="#f90"
                stroke-width="2"
              />
            </svg>
            <span class="score">
              <span>产品</span>
              <span>{{hotellist[0].scores.product.toFixed(1)}}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="num3">
        <div class="num3_location">
          <div class="num3_content">
            <svg data-v-52d03705 viewBox="0 0 74 74">
              <path
                data-v-52d03705
                d="M 35 2, A 35,35 0 1 1 2.5845207259532756,28.8164166186711"
                fill="none"
                stroke="#f90"
                stroke-width="2"
              />
            </svg>
            <span class="score">
              <span>服务</span>
              <span>{{hotellist[0].scores.service.toFixed(1)}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
<Commentlist></Commentlist>
    
  </div>
</template>

<script>
export default {
  props: ["hotellist"],
  data() {
    return {
      value: this.hotellist[0].stars,
      list: [],
      commentNum: "",
      
    };
  },
  async mounted() {
    // 评论
    const comment = await this.$axios.get("/hotels/comments");
    this.commentNum = comment.data.total; 
  },
  mounted(){
      console.log(this.hotellist);
      
  }
};
</script>

<style lang="less" scoped>
.comment {
    padding: 20px 0;
  .scores {
    color: #666;
    padding: 20px 0;
    display: flex;
    .num1 {
      width: 16.66667%;
    }
    .num2 {
      width: 20.83333%;
      position: relative;
      display: flex;
      align-content: center;
      .recommend {
        position: absolute;
        left: 20px;
        border: 2px solid #fa3;
        text-align: center;
        line-height: 70px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        opacity: 0.25;
        transform: rotate(-30deg);
        font-size: x-large;
      }
      .num2_p {
        margin-top: 20px;
        .num2_9_content {
          /deep/.el-rate__icon {
            font-size: 22px;
          }
        }
        .num2_p_content {
          height: 20px;
          line-height: 1;
        }
      }
    }
    .num3 {
      width: 12.5%;
      .num3_location {
        width: 70px;
        .num3_content {
          position: relative;
          .score {
            color: rgb(255, 153, 0);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
          }
        }
      }
    }
  }
 
}
</style>